<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserState, type typeUserInfo } from '@/store/userState'
import { User, Clock, Star } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
let route = useRoute()

const userState = useUserState()
const userInfo = ref<any>()
onMounted(async () => {
  userInfo.value = await userState.getUserInfo()
})
</script>

<template>
  <div class="valueBox">
    <headerBar :aways-bg="true" class="headerBar"></headerBar>
    <div class="showPage">
      <div class="showPage-innerBox">
        <div style="display: flex; margin-bottom: 80px">
          <div class="leftBar">
            <div class="leftBar-user">
              <el-avatar class="icon" :size="80" :src="userInfo?.avatarUrl" />
              <p>{{ userInfo?.username }}</p>
            </div>
            <div class="leftBar-menu">
              <router-link to="/user/home">
                <div class="leftBar-menu-item" :class="{ 'leftBar-menu-itemit': route.path == '/user/home' }">
                  <el-icon><User /></el-icon>
                  <div>个人设置</div>
                </div>
              </router-link>
              <router-link to="/user/histry">
                <div class="leftBar-menu-item" :class="{ 'leftBar-menu-itemit': route.path == '/user/histry' }">
                  <el-icon><Clock /></el-icon>
                  <div>观看历史</div>
                </div>
              </router-link>
              <!-- <router-link to="/user/collect">
                <div class="leftBar-menu-item" :class="{ 'leftBar-menu-itemit': route.path == '/user/collect' }">
                  <el-icon><Star /></el-icon>
                  <div>我的收藏</div>
                </div>
              </router-link> -->
            </div>
          </div>
          <router-view></router-view>
        </div>
        <footBar></footBar>
      </div>
    </div>
  </div>
  <!-- <div>
    userPage
    <router-view></router-view>
  </div> -->
</template>

<style scoped lang="less">

.leftBar {
  background: rgb(30, 30, 36);
  width: 200px;
  border-radius: 5px;
  margin-right: 10px;
  min-height: 700px;

  &-user {
    margin-top: 40px;
    padding: 20px;
    text-align: center;

    .icon {
      margin-bottom: 20px;
    }
  }

  &-menu {
    margin-top: 60px;
    &-item {
      color: #eee;
      padding: 15px 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      position: relative;
      .el-icon {
        margin-right: 5px;
      }

      &:hover {
        background: linear-gradient(to right, rgba(1, 206, 205, 0.1), rgba(1, 206, 205, 0));
      }
    }

    &-itemit {
      background: linear-gradient(to right, rgba(1, 206, 205, 0.5), rgba(1, 206, 205, 0));

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 15%;
        height: 70%;
        width: 5px;
        background: rgba(1, 206, 205, 1);
      }
      &:hover {
        background: linear-gradient(to right, rgba(1, 206, 205, 0.5), rgba(1, 206, 205, 0));
      }
    }
  }
}

.valueBox {
  display: flex;
  position: relative;

  .headerBar {
    position: fixed;
    top: 0;
    // left: 0;
    width: 100%;
    z-index: 999;
    min-width: 1100px;
    max-width: 2376px;
    margin: 0 auto;
  }

  .showPage {
    width: 100%;
    color: #eee;

    &-innerBox {
      max-width: 1200px;
      min-width: 1100px;
      margin: 0 auto;
      margin-top: 90px;
      padding: 30px;
      padding-right: 30px;
      padding-top: 10px;
    }
  }
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
}
</style>
